<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/src/css/swiper-bundle.min.css" />
  </head>
  <body>
    <style>
        body {
          background-color: #000;
        }
        .swiper1 {
          width: 600px;
          height: 300px;
        }
        .swiper .swiper-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      
        .swiper2 {
          width: 600px;
          height: 100px;
        }
      
        .swiper2 .swiper-slide {
          opacity: 0.4;
        }
      
        .swiper2 .swiper-slide-thumb-active {
          opacity: 1;
        }
      </style>
      
      
      <!-- 大图轮播 -->
      <div class="swiper swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="/src/img/grid/01.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/02.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/03.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/04.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/05.png" /></div>
      
        </div>
      
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
      
        <div class="swiper-button-next"></div>
      
      </div>
      
      <!-- 小缩略图 -->
      <div class="swiper swiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="/src/img/grid/01.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/02.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/03.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/04.png" /></div>
      
          <div class="swiper-slide"><img src="/src/img/grid/05.png" /></div>
      
        </div>
      
      </div>
      
      <script src="/src/js/swiper-bundle.min.js"></script>
      
      <script>
        // 缩略图轮播  一定要在 大图轮播图前初始化
        var thumbsSwiper = new Swiper(".swiper2", {
          direction: "horizontal", // 垂直切换选项
          spaceBetween: 10,
          slidesPerView: 5,
          watchSlidesVisibility: true /*避免出现bug*/,
        });
      
        //   大图轮播
        var mySwiper = new Swiper(".swiper1", {
          direction: "horizontal", // 垂直切换选项
          // loop: true, // 循环模式选项
          spaceBetween: 10,
          thumbs: {
            swiper: thumbsSwiper,
          },
          slideThumbActiveClass: "my-slide-thumb-active",
      
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
          },
      
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      </script>
  </body>
</html>
